<template>
  <div>
    <nav-bar :title="title" :isShow="false"></nav-bar>

    <my-point :is_link="false"></my-point>
    <van-tabs v-model="active">
      <van-tab title="获赠积分明细">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-cell-group>
            <van-cell
              v-for="item in bonusPoints"
              :key="item.id"
              :title="item.score"
              :value="item.update_time"
              :label="item.retailer_name"
            >
              <template #title>
                <span>{{ item.score }}</span>
                <span v-if="item.unused_score != 0">
                  +
                  <van-tag type="warning">{{
                    item.unused_score
                  }}</van-tag></span
                >
              </template>
            </van-cell>
          </van-cell-group>
        </van-list>
      </van-tab>
      <van-tab title="积分消费明细">
        <van-list
          v-model="consumeLoading"
          :finished="consumeFinished"
          finished-text="没有更多了"
          @load="onConsumeLoad"
        >
          <van-cell-group>
            <van-cell
              v-for="item in consumePoints"
              :key="item.id"
              :title="item.score"
              :value="item.update_time"
            />
          </van-cell-group>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
// import { mapGetters } from "vuex";
import NavBar from "@/components/NavBar";
import { getWeChatUser } from "@/api/wechat";
import { getWxBonusPointList, getWxConsumePointList } from "@/api/member";
import MyPoint from "@/components/MyPoint";

export default {
  name: "ClientPoints",
  components: {
    NavBar,
    MyPoint,
  },
  // computed: {
  //   ...mapGetters(["retailer_name"]),
  // },
  data() {
    return {
      title: this.$route.meta.title,
      active: 0,

      bonus_point_image: null,
      user: {},
      bonusPoints: [],
      loading: false,
      finished: false,

      consumePoints: [],
      consumeLoading: false,
      consumeFinished: false,

      listQuery: {
        page: 1,
        page_size: 10,
        openid: localStorage.getItem("openid"),
      },

      consumeQuery: {
        page: 1,
        page_size: 10,
        openid: localStorage.getItem("openid"),
      },
    };
  },
  mounted() {
    this.getWechatUserInfo();
  },
  methods: {
    onLoad() {
      this.getPointsByOpenid();
    },
    onConsumeLoad() {
      this.getConsumePointsByOpenid();
    },
    getWechatUserInfo() {
      getWeChatUser(this.listQuery.openid)
        .then((res) => {
          console.log(res.data);
          this.user = res.data;
        })
        .catch((error) => {
          console.log(error);
          this.$notify({
            type: "danger",
            message: "获取数据失败！",
          });
        });
    },
    getPointsByOpenid() {
      this.loading = true;
      getWxBonusPointList(this.listQuery)
        .then((res) => {
          if (res.data.results.length === 0) {
            this.bonusPoints = []; // 清空数组
            this.finished = true; // 停止加载
          }
          this.listQuery.page = res.data.page;
          this.bonusPoints.push(...res.data.results);
          this.loading = false;

          if (this.bonusPoints.length >= res.data.count) {
            this.finished = true; // 结束加载状态
          }
        })
        .catch(() => {
          this.loading = false;
          this.finished = true;
          this.$notify({
            type: "danger",
            message: "获取历史数据失败！",
          });
        });
    },
    getConsumePointsByOpenid() {
      this.consumeLoading = true;
      getWxConsumePointList(this.consumeQuery)
        .then((res) => {
          if (res.data.results.length === 0) {
            this.consumePoints = []; // 清空数组
            this.consumeFinished = true; // 停止加载
          }
          this.consumeQuery.page = res.data.page;
          this.consumePoints.push(...res.data.results);
          this.consumeLoading = false;

          if (this.consumePoints.length >= res.data.count) {
            this.consumeFinished = true; // 结束加载状态
          }
        })
        .catch(() => {
          this.consumeLoading = false;
          this.consumeFinished = true;
          this.$notify({
            type: "danger",
            message: "获取数据失败！",
          });
        });
    },
  },
};
</script>

<style  scoped>
.img_outer {
  margin: 20px;
  margin-top: 5px;
  display: flex;
  justify-content: center;
}
.title {
  text-align: center;
  margin: 0;
}
.points {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  background-color: #f2f3f5;
}
.van-field__label {
  color: black;
}
.van-col {
  margin: 5px;
  padding: 0px;
}
</style>